import React from 'react';
import classnames from 'classnames';
import { EnvironmentOutline } from 'antd-mobile-icons';
import { Card } from 'antd-mobile';
import './index.module.scss';

const { memo, useMemo } = React;

interface TrainIProps {
  booker: string;
  seatType: string;
  ticketPrice: string;
  idcard: string;
  carriag: string;
  seatNumber: string;
  seatPlace: number; //1靠窗2过道
  orderStatus: number; //1已完成2待支付3已退款4已取消
}
function TrainInfo(props: TrainIProps) {
  const {
    booker,
    seatType,
    ticketPrice,
    idcard,
    carriag,
    seatNumber,
    seatPlace, //1靠窗2过道
    orderStatus, //1已完成2待支付3已退款4已取消
    // orderNumber,
    // phoneNumber,
    // ticketType, //1成人票2学生票
    // totalPrice,
    // ticketCount,
    // orderCreatTime,
  } = props;

  return (
    <>
      <div styleName="ticket-info">
        <div styleName="row-name-seat flex-middle-center ">
          <div styleName="user-name flex-center">
            <span>{booker}</span>
            {/* <div styleName='ticket-type'>{seatType == 1 ? '成人票' : '学生票'}</div> */}
          </div>
          <div styleName="seat">
            <span>{seatType}</span>
            <span>¥{ticketPrice}</span>
          </div>
        </div>
        <div styleName="row-icard-seat flex-middle-center">
          <div styleName="icard">{idcard}</div>
          <div styleName="seat flex-center">
            <div styleName="window-icon">
              {seatPlace == 1 ? '靠窗' : '过道'}
            </div>
            <div styleName="carriage-number">
              {carriag}车厢{seatNumber}
            </div>
          </div>
        </div>
        <div styleName="ticket-number">
          {orderStatus == 1
            ? '出票成功'
            : orderStatus == 2
            ? '待支付'
            : orderStatus == 3
            ? '已取消'
            : orderStatus == 4
            ? '退款成功'
            : ''}
        </div>
      </div>
    </>
  );
}

export default memo(TrainInfo);
